require(['./config'],()=>{
    require(['jquery','template','header','require','footer','fly'], function($,template,header){
        class Detail{
            constructor(){
                this.getdata().then(()=>{
                    this.render()
                    this.donum()
                    this.doimg()
                    this.doct()
                    this.zoom()
                    this.addcar()
                    // this.fly()
                })
               
            }
            getdata(){
                const id=window.location.search.slice(1).split('&').reduce((obj,item)=>{
                    var arr=item.split('=')
                    obj[arr[0]]=arr[1];
                    return obj
                },{}).id
                this.id=Number(id)          
                return new Promise(resolve=>{
                    $.get('http://rap2.taobao.org:38080/app/mock/258602/api/list4',{id:this.id},(resp)=>{
                            const {detail}=resp.body;
                            this.detail={...detail,id:this.id}                     
                            resolve()                      
                })           
                })
            }
            render(){
                //渲染
                $('#detaildiv').html(template('detail',{
                    ...this.detail
                }))
            }
            donum(){
                //数量选择
                $('#cut').on('click',function(){
                    if($('.num span').html()>1){
                        $('.num span').html($('.num span').html()-1)
                    }
                })
                $('#add').on('click',function(){
                    $('.num span').html(Number($('.num span').html())+1)
                })
            }
            doimg(){
                 //浏览图片
                 //左
                $('.left ul li:first img').addClass('ac')
                var num=$('.left ul li img').data()
                $('#left').on('click',function(){   
                    if(num>0){  
                       num--;   
                        $(`.left ul li:eq(${num}) img`).addClass('ac').parent().siblings().children().removeClass('ac')
                        $('#middle').attr('src', $(`.left ul li:eq(${num}) img`).attr('src'))
                        $('#big').attr('src', $('#middle').attr('src'))
                    }
                })
                var num=$('.left ul li img').data().id
                //右
                $('#right').on('click',function(){                                            
                       if(num<$('.left ul li').length-1){
                        num++;
                        $(`.left ul li:eq(${num}) img`).addClass('ac').parent().siblings().children().removeClass('ac')
                        $('#middle').attr('src', $(`.left ul li:eq(${num}) img`).attr('src'))
                        $('#big').attr('src', $('#middle').attr('src'))
                    }                   
                })
                //点击图片
                $('.left ul li').on('click','img',function(){
                    num=$(this).data().id
                    $(this).addClass('ac').parent().siblings().children().removeClass('ac')
                    $('#middle').attr('src', $(this).attr('src'))
                    $('#big').attr('src', $('#middle').attr('src'))
                })
            }
              doct(){
                  //选择颜色和类型
                $('.color').children().eq(0).addClass('ac')
                $('.type').children().eq(0).addClass('ac')
                $('.color').on('click','span',function(){
                    $(this).addClass('ac').siblings().removeClass('ac')
                })
                $('.type').on('click','span',function(){
                    $(this).addClass('ac').siblings().removeClass('ac')
                })
              }   
              zoom(){
                  //放大镜
                $('#smallbox').on('mouseenter',function(){
                    $('.csmallbox span').css("display","block")
                    $('.cbigbox').css("display","block")
                    $('#smallbox').on('mousemove','span',function(e){
                            var left=e.pageX-$('.csmallbox').offset().left-$('.csmallbox span').width()/2;
                            var top=e.pageY-$('.csmallbox').offset().top-$('.csmallbox span').height()/2;
                            if(left<0)left=0;
                            if(top<0)top=0;
                            if(left>$('#smallbox').width()-$('.csmallbox span').width())left=$('#smallbox').width()-$('.csmallbox span').width()
                            if(top>$('#smallbox').height()-$('.csmallbox span').height())top=$('#smallbox').height()-$('.csmallbox span').height()
                            $('.csmallbox span').css({
                                "left":left+'px',
                                "top":top+'px'
                            }); 
                            $('#big').css({
                                "left":-2*left+'px',
                                "top":-2*top+'px'
                            });     
                    })
                    $('#smallbox').on('mouseleave',function(){
                        $('.csmallbox span').css("display","none")
                        $('.cbigbox').css("display","none")
                    })
                })
              } 
              addcar(){
                $('.button').on('click',(e)=>{
                    this.fly(e)
                    let cart=localStorage.getItem('cart')
                    if(cart){
                        cart =JSON.parse(cart)
                        const isexist=cart.some((item)=>{
                            return item.id==this.id
                        })
                        if(isexist){
                            cart=cart.map((item)=>{
                                if(item.id==this.id){
                                    item.num=Number(item.num)
                                    item.num+=Number($('.num span').text()) 
                                }
                                return item
                            })
                        }else{
                            cart.push({img:$('#middle').attr('src'),id:this.id,num:$('.num span').text(),title:$('.name').text(),price:$('.price span').text(),checked:true})
                        }
                        localStorage.setItem('cart',JSON.stringify(cart))

                    }else{
                        localStorage.setItem('cart',JSON.stringify([{img:$('#middle').attr('src'),id:this.id,num:$('.num span').text(),title:$('.name').text(),price:$('.price span').text(),checked:true}]))
                    }
                })
                this.src=$('#middle').attr('src');
            }
            fly(e) {

                $(`<img src="${this.src}" class="fly" style="width:20px";height:20px>`).fly({
                    start:{
                      left:e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                      top: e.clientY,  //开始位置（必填）
                    },
                    end:{
                      left: $('#shop').offset().left, //结束位置（必填）
                      top:$('#shop').offset().top- $(document).scrollTop() + 10,  //结束位置（必填）
                      width: 20, //结束时高度
                      height: 20, //结束时高度
                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop:100, //运动轨迹最高点top值，默认20
                    onEnd: function(){   
                        $('.fly').remove()
                        header.calcshopcar()
                    } //结束回调
                    
                  });
              
            }
           
            

        }
        new Detail()
    });
})